
function modelView(){
    this.container = $("<div id='model-view-container' class='suri-model-view'></div>");
    this.dataWrapper = $("<div id='model-view-data-wrapper' class='suri-model-view' ></div>");

    this.launch = function(){
//        remove previous
        removeModelView();

        setContainer(this.container);

        setDataWrapper(this.dataWrapper);

//      on window resize change the dimensions of container
        $(window).resize(function(){
            var tmp = $(window);
            $('#model-view-container').css({
                'min-height': tmp.height(),
                'min-width': tmp.width()
            });
        });

//        cross button css and js
        $('.cross-button').on({
            'mouseenter': function(){
                $(this).css({'color':'green'});
            },
            'mouseout': function(){
                $(this).css({
                    'color': 'red'
                });
            },
            'mouseup': function(){
                removeModelView();
            }
        });

    };

    this.setData = function(data){
        var $data = $("<div id='data-holder-model' ></div>").append(data);
        $data.css({
            'margin': '20px 20px 20px 20px'
        });
        this.dataWrapper.append($data);
    };

    function setDataWrapper($dataWrapper){

        $dataWrapper.find('#data-holder-model').before("<span class='cross-button' style='font-family: sans-serif;font-size: 15px;float: right;margin-top: 3px;margin-right: 5px;cursor: pointer;color: red'  >X</span>");

        var window_height = $(window).height();

        $dataWrapper.css({
            'display': 'inline-block',
            'min-height': '200px',
            'min-width': '200px',
            'border': '1px lightgray solid',
            'box-shadow': '0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15)',
            'max-width': '80%',
            'border-radius': '6px',
            'background-color': 'white',
            'color': 'black'
        });

        $dataWrapper = $("<div class='suri-model-view' id='data-wrap-holder'></div>").append($dataWrapper);

        $dataWrapper.css({
            'text-align': 'center',
            'position': 'fixed',
            'z-index': 15,
            'width': '100%',
            'max-height': (window_height - 0.3 * window_height) + 'px' ,
            'top': '20%',
            'overflow-y': 'scroll'
        });

        $('body').append($dataWrapper);
    }

    function setContainer(container){
        var tmp = $(window);
        container.css({
            'min-height': tmp.height()+'px',
            'min-width': tmp.width()+'px',
            'position': 'fixed',
            'z-index': 10,
            'top': '0px',
            'background-color': 'white',
            'opacity': 0.8
        });
        $('body').append(container);
    }

//    remove the model
    function removeModelView(){
        $('.suri-model-view').remove();
    }
}
